import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Dimensions,
    ListView,
    TouchableOpacity,
    AsyncStorage,
    DeviceEventEmitter
} from 'react-native';

import {Theme, ListRow, Overlay, Label, Button, Checkbox} from 'teaset';
import Config from '../common/Config'
import Utils from '../common/Utils'
import {Toast,ModalIndicator} from 'teaset';
const STORAGE_KEY_TOKEN = '@AsyncStorageDemo:key_token';
const {height, width} = Dimensions.get('window');

export default class PersonalCenterTabPage extends Component {
    componentDidMount() {
        this.msgListener = DeviceEventEmitter.addListener('refreshing',(listenerMsg) => {
            this.getInfo()
        });
        this._loadInitialState().done();
    }
    async _loadInitialState(){
        try{
            let value=await AsyncStorage.getItem(STORAGE_KEY_TOKEN);
            if(value!==null){
                this._appendMessage(value);
            }else{
                this._appendMessage('');
            }
        }catch(error){
            this._appendMessage('AsyncStorage错误'+error.message);
        }
    }
    _appendMessage=(message)=>{
        this.setState({
            token:this.state.token.concat(message)
        },()=>this.getInfo());
    };
    getInfo=()=>{
        let params={
            "token":this.state.token,
        };
        ModalIndicator.show("正在请求数据......");
        fetch(Config.baseApi+'/user/getInfo',{
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: Utils.getParamsString(params)
        })
            .then((response) => response.json())
            .then((responseJson) => {
                ModalIndicator.hide();
                if(responseJson.status!==1){
                    this.setState({
                        nickname:responseJson.data.nickname,
                        phone:responseJson.data.phone,
                        creditId:responseJson.data.creditId,
                        status:responseJson.data.status||0,
                        head:responseJson.data.head
                    })
                }else{
                    Toast.message(responseJson.msg);
                }
            })
            .catch((error) => {
                ModalIndicator.hide();
                Toast.message(error);
            });
    };
    constructor(props) {
        super(props);
        this.state = {
            status:0,
            phone:123456789,
            nickname:'',
            token:'',
            creditId:'',
            head:''
        }
    };

    goPage=()=>{
        Actions.ModifyPage(
            callback=()=>{
            this.setState({
                token:''
            }
        )})
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.titleView}>
                    <Text style={styles.titleMsg}>我的</Text>
                </View>
                <View style={styles.topLabelView}>
                    <Image
                        source={{uri:'http://118.31.37.236/upload/'+this.state.head}}
                        style={styles.headImg}/>
                    <View style={styles.centerView}>
                        <Text style={styles.nameMsg}>{this.state.nickname}</Text>
                        <View style={styles.accountsView}>
                            <Text style={styles.accountsMsg}>信用号：</Text>
                            <Text style={styles.accountsMsg}>{this.state.creditId}</Text>
                        </View>
                    </View>
                    <TouchableOpacity
                        onPress={()=>this.goPage()}
                        style={styles.modifyView}>
                        <Text style={styles.modifyMsg}>修改</Text>
                    </TouchableOpacity>
                </View>
                <View style={{height:10}}/>
                <View style={styles.LabelView}>
                    <Image
                        source={ImageUtil.Phone}
                        style={styles.phoneImg}/>
                    <Text style={styles.phoneMsg}>手机号</Text>
                    <Text style={styles.phoneNumMsg}>{this.state.phone}</Text>
                </View>
                <View style={{height:10}}/>
                {this.differentState()}
                <View style={{height:10}}/>
                <View style={styles.bottomLabelView}>
                    <TouchableOpacity style={[styles.LabelView,{borderBottomWidth:1,borderColor:'#f0f0f0'}]}>
                        <Image
                            source={ImageUtil.Hope}
                            style={styles.phoneImg}/>
                        <Text style={styles.phoneMsg}>帮助中心</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.LabelView}>
                        <Image
                            source={ImageUtil.Regarding}
                            style={styles.phoneImg}/>
                        <Text style={styles.phoneMsg}>关于我们</Text>
                    </TouchableOpacity>
                </View>
                <View style={{height:10}}/>
                <TouchableOpacity
                    onPress={()=>this.pullOutLogin()}
                    style={styles.ButView}>
                    <Text style={styles.ButMsg}>退出登录</Text>
                </TouchableOpacity>
            </View>
        );
    }

    pullOutLogin=()=>{
        AsyncStorage.removeItem(STORAGE_KEY_TOKEN);
        Actions.LoginPage();
    };

    showPop(type, modal, text) {
        let overlayView = (
            <Overlay.PopView
                style={{alignItems: 'center', justifyContent: 'center'}}
                type={type}
                modal={modal}
                ref={v => this.overlayPopView = v}
            >
                <View style={{backgroundColor: Theme.defaultColor, minWidth: 240, minHeight: 277/2, borderRadius: 15, justifyContent: 'center', alignItems: 'center'}}>
                    <Text style={{fontSize:14, color:'#000000'}}>你需要先认证，才可以备档。</Text>
                    <TouchableOpacity
                        onPress={()=>this.goToPage()}
                        style={{marginTop:23,width:82,height:34,borderRadius:5,borderColor:'#3090dd',borderWidth:1,justifyContent:'center',alignItems:'center'}}>
                        <Text style={{fontSize:14,color:'#000000',textAlign:'center'}}>去认证</Text>
                    </TouchableOpacity>
                </View>
            </Overlay.PopView>
        );
        Overlay.show(overlayView);
    }

    goToPage=()=>{
        Actions.CertificationPage();
        this.overlayPopView && this.overlayPopView.close()
    };

    differentState=()=>{
        if(this.state.status===0){
            return(
                <TouchableOpacity
                    onPress={() => this.showPop('zoomOut', true, 'Pop modal')}
                    style={styles.LabelView}>
                    <Image
                        source={ImageUtil.SpareParts}
                        style={styles.phoneImg}/>
                    <Text style={styles.phoneMsg}>我的备档</Text>
                    <View style={styles.sparePartsView}>
                        <Text style={styles.sparePartsMsg}>未备档</Text>
                        <Image
                            source={ImageUtil.Guide}
                            style={styles.guideImg}/>
                    </View>
                </TouchableOpacity>
            )
        }else if(this.state.status===1){
            return(
                <TouchableOpacity
                    onPress={()=>Actions.AuditPage()}
                    style={styles.LabelView}>
                    <Image
                        source={ImageUtil.SpareParts}
                        style={styles.phoneImg}/>
                    <Text style={styles.phoneMsg}>我的备档</Text>
                    <View style={styles.sparePartsView}>
                        <Text style={styles.sparePartsMsg}>审核中</Text>
                        <Image
                            source={ImageUtil.Guide}
                            style={styles.guideImg}/>
                    </View>
                </TouchableOpacity>
            )
        }else if(this.state.status===2){
            return(
                <TouchableOpacity
                    onPress={()=>Actions.PaginationPage()}
                    style={styles.LabelView}>
                    <Image
                        source={ImageUtil.SpareParts}
                        style={styles.phoneImg}/>
                    <Text style={styles.phoneMsg}>我的备档</Text>
                    <View style={styles.sparePartsView}>
                        <Text style={styles.sparePartsMsg}>已认证</Text>
                        <Image
                            source={ImageUtil.Guide}
                            style={styles.guideImg}/>
                    </View>
                </TouchableOpacity>
            )
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#f0f0f0'
    },
    titleView:{
        backgroundColor:'#000000',
        width:width,
        alignItems:'center',
        justifyContent:'center'
    },
    titleMsg:{
        textAlign:'center',
        fontSize:20,
        color:'#ffffff',
        marginTop:34,
        marginBottom:29/2
    },
    topLabelView:{
        backgroundColor:'#ffffff',
        flexDirection:'row',
        height:68,
        width:width,
        alignItems:'center'
    },
    headImg:{
        height:44,
        width:44,
        borderRadius:22,
        marginLeft:15
    },
    centerView:{
        marginLeft:15,
        height:68,
    },
    nameMsg:{
        marginTop:15,
        fontSize:15
    },
    accountsView:{
        marginTop:10,
        flexDirection:'row',
        alignItems:'center'
    },
    accountsMsg:{
        fontSize:13,
        color:'#646464'
    },
    modifyView:{
        position: 'absolute',
        top:15,right:15
    },
    modifyMsg:{
        color:'#3090dd',
        fontSize:15
    },
    LabelView:{
        flexDirection:'row',
        alignItems:'center',
        height:45,
        width:width,
        backgroundColor:'#ffffff'
    },
    phoneImg:{
        marginLeft:15,
        width:17,
        height:17
    },
    phoneMsg:{
        marginLeft:11,
        color:'#232323',
        fontSize:15
    },
    phoneNumMsg:{
        position: 'absolute',
        right:15,
        color:'#232323',
        fontSize:15
    },
    sparePartsView:{
        position: 'absolute',
        right:15,
        flexDirection:'row'
    },
    guideImg:{
        height:17,
        width:17,
        marginLeft:11
    },
    sparePartsMsg:{
        fontSize:15,
        color:'#646464'
    },
    bottomLabelView:{
        backgroundColor:'#ffffff',
        width:width
    },
    ButView:{
        width:width,
        alignItems:'center',
        justifyContent:'center',
        height:45,
        backgroundColor:'#ffffff'
    },
    ButMsg:{
        fontSize:15,
        color:'#232323'
    }
});
